<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
        }
    </style>
</head>

<body>
    index

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script src="./request.js"></script>
    <div>
        商品标题： <input type="text" name="" id="title">
        <br>
        商品详情： <input type="text" name="" id="content">
        <br>

        商品图片： <input type="file" name="" id="uploadImg" onchange="uploadImgFn()">
        <br>

        <button onclick="publishFn()">发布</button>
    </div>

    <div id="edit" style="display: none;">
        商品标题： <input type="text" name="" id="title">
        <br>
        商品详情： <input type="text" name="" id="content">
        <br>

        商品图片：<input type="text" name="" id="img-url">
        <input type="file" name="" id="uploadImg2" onchange="uploadImgFn2()">
        <br>

        <button onclick="editOkFn()">确定</button>
    </div>
    <ul>
        <!-- <li>
            <title></title>
            <img src="" alt="">
            <button>删除</button>
            <button>编辑</button>
        </li> -->
    </ul>

    <script>
        /*
            1-发布
                -先写 上传图片功能-- 返回一个图片的一直
                -发布--调用发布请求-传入 title-content-img
            2-列表
            3-删除
            4-修改
        */

        // 发布时候 上传的图片地址
        let imgUrl = null
        // 列表接口请求回来的  商品数据
        let productArr = null
        // 点击编辑按钮的时候 得到商品id
        let goodsId = null
        // 上传图片
        async function uploadImgFn() {
            let ipt = document.querySelector('#uploadImg');
            let file = ipt.files[0];//第一张图片对象
            console.log(file);

            // 创建formData 
            let fd = new FormData()
            // fd.append('参数名','参数值')
            fd.append('img', file)

            let uploadImgAPI = '/upload-img'
            // axios 上传图片
            // formData对象 当做请求体了

            // 原因： 使用formData 上传图片-会自动设置请求头中content-type -multipart/form-data
            // 但是使用axios ，提前把请求头设置死 app/json 
            // multipart/form-data 

            // 1-上传图片接口 再次设置请求头 content-type -multipart/form-data
            // 2- 请求拦截器 判断--是否是 上传图片接口 设置请求头 content-type -multipart/form-data
            try {
                let r = await http.post(uploadImgAPI, fd, { headers: { 'content-type': 'multipart/form-data' } })
                console.log(r.data);
                console.log(r.data.url);
                imgUrl = r.data.url;

            } catch (error) {
                console.log(error);
                // console.log(error);
                alert(error.response.data)
            }

        }


        async function uploadImgFn2() {
            let ipt = document.querySelector('#uploadImg2');
            let file = ipt.files[0];//第一张图片对象
            console.log(file);

            // 创建formData 
            let fd = new FormData()
            // fd.append('参数名','参数值')
            fd.append('img', file)

            let uploadImgAPI = '/upload-img'
            // axios 上传图片
            // formData对象 当做请求体了

            // 原因： 使用formData 上传图片-会自动设置请求头中content-type -multipart/form-data
            // 但是使用axios ，提前把请求头设置死 app/json 
            // multipart/form-data 

            // 1-上传图片接口 再次设置请求头 content-type -multipart/form-data
            // 2- 请求拦截器 判断--是否是 上传图片接口 设置请求头 content-type -multipart/form-data
            try {
                let r = await http.post(uploadImgAPI, fd, { headers: { 'content-type': 'multipart/form-data' } })
                console.log(r.data);
                console.log(r.data.url);
                // imgUrl = r.data.url;
                // 上传成功以后--把 上传图片 div 中 展示图片地址的输入框 修改了
                document.querySelectorAll('#edit input')[2].value = r.data.url

            } catch (error) {
                console.log(error);
                // console.log(error);
                alert(error.response.data)
            }

        }



        // 发布
        async function publishFn() {
            let title = document.querySelector('#title').value;
            let content = document.querySelector('#content').value;
            let publishAPI = '/shop/articles/';
            let r = await http.post(publishAPI, { title, content, img: imgUrl })
            console.log(r.data);
            loadList()

        }

        // 列表
        async function loadList() {

            let listAPI = '/shop/articles'
            let r = await http.get(listAPI, { params: { pagenum: 1 } })
            console.log(r.data);

            let liStr = r.data.data.map(v => `
                <li>
                    <span>${v.title}</span>
                    <img src="${v.img}" alt="">
                    <button onclick="delFn('${v._id}')">删除</button>
                    <button onclick="showEditDiv('${v._id}')">编辑</button>
                </li> 
            `).join('');
            document.querySelector('ul').innerHTML = liStr
            // 商品数组 数据保存到全局变量中
            productArr = r.data.data

        }

        async function delFn(id) {
            console.log(id);
            let deleteAPI = '/shop/articles/' + id;
            let r = await http.delete(deleteAPI)
            loadList()
        }


        //点击编辑按钮 -让div显示
        async function showEditDiv(id) {
            goodsId = id;//保存 要编辑的id

            let editDiv = document.querySelector('#edit');
            editDiv.style.display = 'block'
            console.log(id);
            //获取要编辑的商品的id--
            //  1- 调用根据id获取商品详情接口--获取商品数据-展示editdiv中
            let api = '/shop/articles/' + id;
            let r = await http.get(api)
            console.log(r.data.data);
            let obj = r.data.data;//商品详情数据

            // //  2- 使用全局变量 获取所有商品数据-- --根据商品id 去数组中找到 要编辑的商品数据
            // let obj = productArr.find(v => v._id == id)
            // console.log(obj);


            let editDivIpts = editDiv.querySelectorAll('input');
            editDivIpts[0].value = obj.title;
            editDivIpts[1].value = obj.content;
            editDivIpts[2].value = obj.img




        }


        // 点击确定 -修改
        async function editOkFn() {

            // 修改接口
            // id 
            // title
            // content
            // img
            let api = '/shop/articles/' + goodsId;

            console.log(goodsId);

            // 获取 要编辑的数据
            let ipts = document.querySelectorAll('#edit input');
            let title = ipts[0].value;
            let content = ipts[1].value;
            let img = ipts[2].value;

            let obj = { title, content, img };
            console.log(obj);

            // 调用编辑接口
            let r = await http.patch(api, obj)
            console.log(r);

            // 编辑成功 刷新列表--- 编辑div 隐藏
            loadList()

            document.querySelector('#edit').style.display = 'none'


        }
        loadList()
    </script>

</body>

</html>